<template>
    <div class="upload">
        <div class="upload-list" v-if="value" :style="{backgroundImage: `url(${value})`}">
            <template >
                <div class="upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(value)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                </div>
            </template>
        </div>
        <Upload ref="upload" :show-upload-list="false"
            action="''"
            :default-file-list="defaultList"
            :before-upload="beforeUpload"
            :format="config.format || ['jpg', 'jpeg', 'png']"
            :max-size="config.maxSize || 10240"
            :on-format-error="handleFormatError"
            :multiple="config.multiple" type="drag"
            :on-exceeded-size="handleMaxSize"
            style="display: inline-block; width: 100%;">
            <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
            </div>
        </Upload>
        <Modal v-model="visible" footer-hide>
            <img :src="imgName" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: null
        },
        config: {
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            defaultList: [],
            imgName: '',
            visible: false,
        }
    },
    watch: {
        value: {
            handler(val) {
                this.defaultList = val ? [{ name: 'name', url: val }] : []
            },
            immediate: true
        }
    },
    methods: {
        handleView(name) {
            this.imgName = name;
            this.visible = true;
        },
        handleRemove(file) {
            this.$emit('change', '')
        },
        handleFormatError(file) {
            this.$Notice.warning({
                desc: 'File format is incorrect, please select jpg or png.'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                desc: 'File is too large, no more than 2M.'
            });
        },
        beforeUpload(file) {
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                const _base64 = reader.result
                this.$emit('change', _base64)
            }
            return false//阻止图片继续上传，使得form表单提交时统一上传
        }
    },
    mounted() {
    }
}
</script>

<style scoped>
.upload {
    position: relative;
    min-width: 60px;
    height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.upload-list {
    position: absolute;
    top: 0;
    bottom: -2px;
    left: 0;
    right: 0;
    line-height: 62px;
    border: 1px solid #eee;
    text-align: center;
    overflow: hidden;
    background: #fff;
    background-position: 10px center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.upload-list:hover .upload-list-cover {
    display: block;
}

.upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}</style>